<template>
  <div class="categories">
        <!-- 头部导航 -->
        <header class="header">
            <div class="top-bar flex-r-b">
                <a class="left goback" @click='goback'></a>
                <div class="search flex-r-b">
                    <span class="icon"></span>
                    <input type="search" placeholder="搜索"/>
                </div>
            </div>
            <!-- 分类 -->
            <div :class="['nav-wrapper',{show2:show2}]">
                <!-- 一级分类 -->
                <div class="nav-bar1-wrapper" ref="nav1" >
                    <div class="nav-bar1">
                        <span v-for="(nav,index) in navs" 
                            :key='index'
                            :class="[{all: index==0},{active: index==active1}]"
                            >{{nav}}</span>
                                             
                    </div>
                </div>
                <!-- 二级分类 -->
                <div class='nav-bar2-wrapper' ref='nav2'>
                    <div class="nav-bar2">
                        <div v-for="(nav , index ) in navs2" 
                              :key='index'
                              :class="[{all: index === 0},{active: index === active2}]"
                              ><span>{{nav}}</span></div>                        
                    </div>
                </div>
            </div>
        </header>

        <!-- 分类列表 -->
        <div class="list">
            <div class="wrapper flex-r-b">
                <Card1 @showSize='showSize(good)' v-for="good in goodsList" :key='good.id' :data='good'></Card1>               
            </div>
        </div>

        <SizeModual ref='size' :data='data'></SizeModual>
  </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
import Card1 from "@/components/Card1";
import SizeModual from "@/components/SizeModual";
// import BScroll from "better-scroll";
import NavScroll from '../../public/js/NavScroll.js'
export default {
  components: {
    Card1,
    SizeModual
  },
  props: {},
  data() {
    return {
        navs:['全部','法式面包','法式面包','法式面包','法式面包'],
        navs2:['全部','分类一','分类二','分类三','分类四','分类五','分类六'],
        active1:0,
        active2:0,
        show2:false,
        data:{}
    };
  },
  created() {    
  },
  mounted() {
    this.$nextTick(()=>{
      this._initNav()
    })
  },
  computed: {
      ...mapGetters(['count']),
      ...mapState(['goodsList'])
  },
  methods: {
      goback(){
          this.$router.go(-1)
      },
      showSize(data){
          this.data = data
          this.$refs.size.showAdd()
      },
      _initNav(){
        if(this.navScroll2){
          this.navScroll2.refresh()
        }else{
          this.navScroll2 = new NavScroll(this.$refs.nav2)
          this.navScroll2.on('click',({oldIndex,index})=>{
            if(oldIndex === index) return
            this.active2 = index
          })
        }
        if(this.navScroll1){
          this.navScroll1.refresh()
        }else{
          this.navScroll1 = new NavScroll(this.$refs.nav1)
          this.navScroll1.on('click',({oldIndex , index})=>{
              if(this.show2 && oldIndex === index){
                  this.show2 = false
                  return
              }else{
                  this.show2 = true
              }
              this.active1 = index
              this.active2 = 0
              this.navScroll2.refresh()
          })
        }
              
      },
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
.categories {
  padding: 1.15rem 0.24rem;
  touch-action: none;
  // 头部
    .header {
        position: fixed;
        overflow: visible;
        top: 0;
        left: 0;
        width: 100%;
        // 搜索
        .top-bar {
            overflow: hidden;
            width: 100%;
            height: .8rem;
            font-size: .32rem;
            color: $c-2a;
            padding: 0 .24rem;
            z-index: 9;
            background: white;
            .goback {
                height: .5rem;
                width: 1rem;
                background: url("../../public/images/icon/icon_16.png") no-repeat;
                background-size: .16rem .32rem;
                background-position: left center;
            }
            .search {
                width: 4.4rem;
                height: .62rem;
                border-radius: .31rem;
                background: #FBFBFB;
                .icon {
                    margin: 0 .24rem;
                    width: .24rem;
                    height: .24rem;
                    background: url("../../public/images/icon/iocn_1.png") no-repeat;
                    background-size: 100% 100%;
                }
                input {
                    flex: 1;
                    padding: .15rem 0;
                    outline: none;
                    border: none;
                    background: none;
                    font-size: .26rem;
                    color: $c-99;
                }
                input::-webkit-input-placeholder{
                    color: $c-99;
                }
            }
        }
        // 一二级分类
        .nav-wrapper {
            height: .7rem;
            white-space: nowrap;
            position: relative;
            // 一级分类
            .nav-bar1-wrapper{
                height: .7rem;
                background: $c-ffba17;
                overflow: hidden;
                .nav-bar1 {
                    // overflow-x: scroll;
                    // padding: 0 .24rem;
                    height: 1rem;
                    font-size: .26rem;
                    font-family: $f-Bold;
                    color: white;
                    span {
                        float:left;
                        width: 1.85rem;
                        text-align: center;
                        margin-top: .16rem;
                        &.all{
                            text-align: left;
                            width: 1.88rem;
                            padding-left: .24rem;
                        }
                        &.active{
                            font-size: .28rem;
                            font-weight: bold;
                        }
                    }
                    &:-webkit-scrollbar {    
                        width: 0px;
                        display: none;
                      }
                }
            }
            // 二级分类
            .nav-bar2-wrapper{
                position: absolute;
                top:100%;
                left: 0;
                width: 100%;
                height: 0;
                opacity: 0;
                visibility: hidden;
                transition: all .5s;
                background: white;
                font-size: .26rem;
                overflow: hidden;
                background: url("../../public/images/index/bj_1.png") no-repeat;
                background-size:100%;
                .nav-bar2{
                    height: 1.2rem;
                    // // overflow-x: scroll;
                    // white-space: nowrap;
                    padding: .16rem 0;
                    >div{
                        float:left;
                        width: 1.82rem;
                        height: .5rem;
                        text-align: center;
                        color: $c-99;
                        padding-left:.25rem;
                        &:last-child{
                            width: 2.07rem;
                            padding: 0 .25rem;
                        }
                        span{
                            display: block;
                            border-radius: .25rem;
                            border: 1px solid $c-99;
                            height: 100%;
                            padding: .05rem 0;
                        }
                        &.active span{
                            border-color: $c-ffba17;
                            color: $c-ffba17;
                        }
                    }
                }
            }
            //显示二级分类
            &.show2{
                .nav-bar2-wrapper{
                    height: .88rem;
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
    }
  // 产品列表
  .list {
    margin-top: 0.5rem;
    .wrapper {
      flex-wrap: wrap;
    }
  }
}
</style>